<template>
	<view>
		<view class="header flex justify-center align-center">
			<image src="/static/logo.png" class="login-img" />
		</view>
		<view class="padding-lr-lg">
			<u-form :model="form" ref="uForm" label-position="left">
				<u-form-item prop="phone" left-icon="/static/icon4.png"
					:left-icon-style="{width: '48rpx',height: '48rpx'}" :border-bottom="false">
					<u-input v-model="form.phone" placeholder="请输入手机号" height="86" :custom-style="{paddingLeft:'40rpx'}"
						type="number" />
				</u-form-item>
<!-- 				<u-form-item prop="code" left-icon="/static/icon5.png"
					:left-icon-style="{width: '48rpx',height: '48rpx'}" :border-bottom="false">
					<u-input v-model="form.code" placeholder="请输入验证码" type='number'
						:custom-style="{paddingLeft:'40rpx'}" height="86" />
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" />
					<view class="text-green text-30 padding-right" slot="right" @click="getCode">{{tips}}</view>
				</u-form-item> -->
				<u-form-item prop="pass" left-icon="/static/icon6.png"
					:left-icon-style="{width: '48rpx',height: '48rpx'}" :border-bottom="false">
					<u-input v-model="form.pass" placeholder="请输入密码" type="password" height="86"
						:custom-style="{paddingLeft:'40rpx'}" />
				</u-form-item>
<!-- 				<view class="role text-right padding-right text-green padding-top-lg" @click="handleChangePass">修改密码
				</view> -->
				<!-- <view class="text-right text-green" @click="handleChangePass">修改密码</view> -->
			</u-form>
		</view>
		<view class="btn-box">
			<u-button type="primary" :custom-style="commonBtn" hover-class="none" @click="submit"
				:disabled="isDisabled">立即登录</u-button>
		</view>
	</view>
</template>

<script>
	import {
		commonBtn,
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				commonBtn,
				isDisabled: false,
				tips: '获取验证码',
				seconds: 60,
				form: {
					phone: '',
					code: '',
					pass: '',
				},
				rules: {
					phone: [{
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						required: true,
						message: '请输入正确手机号',
						trigger: ['blur', 'change']
					}],
					pass: [{
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					}],
					code: [{
						required: true,
						message: '验证码不能为空',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let parm = {
							mobile: this.form.phone,
							password: this.form.pass,
							captcha: this.form.code,
							event: 'mobilelogin'
						}
           
						this.$u.api._login(parm).then(res => {
							this.isDisabled = true;
							let group_id = res.data.userinfo.group_id;
							this.$u.toast('登录成功');
							let userinfo = res.data.userinfo;
							let token = res.data.userinfo.token;
              // 客服团队信息
              let team = {
                id: '007',
                avatar: "/static/logo.png",
                name: '星沐泞咨询'
              }
              uni.setStorageSync('team', team);
							uni.setStorageSync('token', token);
							uni.setStorageSync('tabBarIndex', 1);
							uni.setStorageSync('userinfo', userinfo);
							uni.setStorageSync('group_id', group_id);
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/conversations/conversations?group_id=' +
										group_id
								})
							}, 1500)
						})
					} else {
						this.$u.toast('校验失败')
					}
				});
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						let parm = {
							mobile: this.form.phone
						}
						this.$u.api._send(parm).then(res => {
							uni.hideLoading();
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						})
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			handleChangePass() {
				uni.navigateTo({
					url: '/pages/lawyer-login/change-pass'
				})
			}
		},
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.header {
		padding: 100rpx 0;

		.login-img {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.btn-box {
		margin: 100rpx auto;
	}

	/deep/.u-form-item--left {
		flex: 0 0 31rpx !important;
	}

	/deep/ .u-form-item--left__content__icon {
		display: flex;
	}

	/deep/.u-form-item {
		width: 670rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: #F7F8FA;
		margin: 0 auto 40rpx auto;
		border-radius: 20rpx;
		padding: 0 30rpx !important;
	}

	.role {
		width: 200rpx;
		margin-left: auto;
	}
</style>